<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="JQuery/jquery-1.8.3.js"></script>
		<script>
			$(document).ready(function(){
					// 选择ul下的所有子li元素并设置颜色为蓝色
				    $('ul').children('li').css('color', 'blue');
				    
				    // 选择body下的所有h2元素并设置颜色为红色
				    $('body').find('h2').css('color', 'red');
				    
				    // 选择body下的#id3元素并设置颜色为粉色
				    $('body').find('#id3').css('color', 'pink');
				    
				    // 选择div下的第二个p元素的兄弟p元素并设置颜色为绿色
				    $('div>p').eq(2).siblings('p').css('color', 'green');
				    
				    // 选择ol下的第一个li元素的后续所有li元素并设置颜色为橙色
				    $('ol li').eq(0).nextAll().css('color', 'orange');
				    
				    // 选择ol下的第二个li元素的前一个所有li元素并设置颜色为黑色
				    $('ol li').eq(1).prevAll().css('color', 'black');
			});
		</script>

	</head>
	<body>
		  <h2 id="id1">校园道路</h2>
		  <ul>
				<li class='road'>晨光大道</li>
				<li class='road'>银杏路</li>
				<li class='road'>桂花路</li>
		  </ul>
		  <div>
				<h2 id="id2">校园花草</h2>
				<p class='grass flower'>樱花</p>
				<p class='grass flower'>桂花</p>
				<p class='grass flower'>兰花</p>
		  </div>
		  <h2 id="id3">校园建筑</h2>
		  <ol>
				<li class='floor'>问天楼</li>
				<li class='floor'>雄关</li>
				<li class='floor'>明镜楼</li>
		  </ol>
		  <h2 id="id4" class="lake">校园湖泊</h2>
		  <ul>
				<li>晨光湖</li>
		  </ul>
	</body>
</html>